﻿@{
    ViewBag.Title = "用户登录";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section style {
    <link rel="stylesheet" href="/Static/Template/css2/normalize.css">
    <link rel="stylesheet" href="/Static/Template/css2/common.css">
    <link rel="stylesheet" href="/Static/Template/css2/server.css">
}


 <header class="usercenter-header">
        <img src="/Static/Template/image/header_bg.png" class="header-image" />
        <div class="logos">

            <img src="/Static/Template/image/default.png" alt="云校logo" class="yx-logo" style="margin-left: -96px;" />
        </div>
    </header>

    <div class="yx-content">
        <article class="usercenter-container">
            <header>云校帐号登录</header>
            <!--登录云校帐号表单-->
            <form class="login-yunxiao">
                <!--验证帐号 当输入的是电话时再form-list后添加account-phone -->
                <!--当输入的是用户名时再form-list后添加account-username-->
                <!--当输入的是邮箱时再form-list后添加account-email-->
                <!--以上全部去除， 统一为account-name -->
                <section class="form-list account-name">
                    <input id="loginName" type="text" placeholder="请输入用户名/邮箱/手机号" />
                    <!--左侧图标-->
                    <span class="username-icon"></span>
                    <aside class="validate hide">
                        <span></span>
                    </aside>
                </section>
                <section class="form-list account-password">
                    <input id="password" type="password" maxlength="20" placeholder="请输入密码" />
                    <span class="password-icon"></span>
                    <aside class="validate hide">
                        <span></span>
                    </aside>
                </section>
                <!--多次输入错误，显示验证码-->
                <section class="form-list captchas-validate" style="display:none">
                    <!--验证码区域-->
                    <div class="captchas-img">
                        <img id="captchaImage" src="image/code.jpg" alt="验证码" />
                        <a id="captchaRefresh">换一张</a>
                    </div>
                    <input id="captchaValue" type="text" placeholder="输入验证码" />
                    <!--右侧检测结果状态 验证中，在validate后添加 checking 验证正确后，添加right 错误添加error -->
                    <aside class="validate">
                        <span></span>
                    </aside>
                </section>
                <section class="form-list auto-login">
                    <!--检测结果状态 验证错误，在warning后添加 error  -->
                    <div id="errMsg" class="warning">
                        <span></span>
                    </div>
                    <div class="checkbox-pic">
                        <input type="checkbox" name="loginNext" id="login-next" />
                        <!--如果input有checked被选中状态，则为 span 添加类名checkbox-checked -->
                        <label for="login-next"><span></span>下次自动登录</label>
                    </div>
                </section>
                <section class="form-list">
                    <a id="btn-login" class="account-btn account-submit">登录</a>
                </section>

                <!--忘记密码与专用通道-->
                <section class="form-list password-channel">
                    <a id="btn-password" class="forget-password">忘记密码?</a>
                    <a id="btn-partner" class="private-channel">合作学校专用通道
                <span></span>
                    </a>
                </section>
                <section class="form-list">
                    <a id="btn-register" class="account-btn account-other" href="Register">还没有帐号？免费注册 <span class="login-go"></span>
                    </a>
                </section>
            </form>
        </article>
        <footer class="usercenter-footer">
            <ul>
                <li><a href="http://www.yunxiao.com">云校官网</a></li>
                <li><a href="http://paike.yunxiao.com">排课</a></li>
                <li><a href="http://bbs.yunxiao.com">论坛</a></li>
                <li><a>北京修齐治平科技有限公司 ©2015</a></li>
            </ul>
        </footer>
    </div>

@section script {

    <script type="text/javascript">

        (function () {
            $("#loginName").focus(function () {
                $(this).removeClass("error-info");
            });

            $("#password").focus(function () {
                $(this).removeClass("error-info");
            });

            $("#login-next").on("click", function () {
                $(".checkbox-pic").find("span").toggleClass("checkbox-checked");
            });

        })();

        // 验证表单，失败返回false
        // 成功返回用户登录obj
        function validateForm() {

            var loginName = $("#loginName").val();
            var password = $("#password").val();

            if (!loginName || !password) { alert("用户名或密码不能为空!"); return false; }

            return {
                userName: loginName,
                password : password
            };
        }


        $("#btn-login").on("click", function () {
            var datas = validateForm();
            if (datas) {
                $.post("Login", datas, function (data) {
                    // console.log(data);
                    if (data.userID > 0) {
                        // 登录成功，跳转到首页
                        window.location.href = "/Home/NewIndex";
                    } else {
                        $("#loginName").addClass("error-info");
                        $("#password").addClass("error-info");
                    }
                }, "json");
            }
        });
    </script>

    <style type="text/css">
        .error-info {
            border-color:red !important;
        }
    </style>
}